<template>
  <div>
    <el-button type="primary" @click="addSpecification">添加规格</el-button>
    <el-form>
      <el-form-item v-for="(item,index) in form.formList" :key="index">
        <div>
          <el-input style="width:500px" v-model="item.title" /> <span>添加规格值</span>
          <div>
            <el-space>
              <el-tag v-for="(items,ind) in item.values" :key="ind" closable @close="deleteTab(index,ind,items)">{{items}}</el-tag>
              <el-input v-if="item.bool" ref="inputRef" style="width:100px" v-model.trim="item.val" size="small" @blur="handleInputConfirm(index)" />
              <el-button v-else class="button-new-tag ml-1" size="small" @click="addTab(index)">+ 添加 </el-button>
            </el-space>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <el-button style="margin:10px 0px" type="primary" @click="refresh">刷新</el-button>
    <el-table :data="form.skuList" style="width: 100%" border :span-method="objectSpanMethod">
      <el-table-column :prop="'id_'+item.title" :label="item.title" width="150" v-for="item in form.formList" :key="item" />
      <el-table-column>
        <el-input :value='0' />
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'order',
      form: {
        skuList: [],
        formList: []
      },
      list: {
        val: '',
        title: '',
        values: [],
        bool: null
      }
    }
  },
  methods: {
    // 添加规格
    addSpecification() {
      if (this.form.formList.length >= 3) return
      this.form.formList.push(JSON.parse(JSON.stringify({ ...this.list })))
    },
    handleInputConfirm(index) {
      let value = this.form.formList[index].val
      let values = this.form.formList[index].values
      values.push(value)
      this.form.formList[index].bool = false
    },
    // 添加标签
    addTab(index) {
      this.form.formList[index].bool = true
      this.form.formList[index].val = ''
    },
    // 删除
    deleteTab(index, ind) {
      this.form.formList[index].values.splice(ind, 1)
      this.refresh()
    },
    // 刷新
    refresh() {
      let values = this.form.formList.map(item => item.values).filter(item => item.length > 0)  //获取values
      let title = this.form.formList.filter(item => item.values.length > 0).map(item => item.title) //获取标题
      // let title = this.form.formList.map(item=>item.title)
      let sku = values.reduce((total, item) => {
        let arr = []
        total.forEach(a => {
          item.forEach(b => {
            arr.push(a.concat([b]))
          })
        });
        return arr
      },
        [[]]
      )

      let arry = sku.map(item => {  //构建数据
        let obj = {

        }
        item.forEach((items, index) => {
          let key = 'id_' + title[index]
          obj[key] = items
        })
        return obj
      })
      this.form.skuList = arry
    },
    //跨行
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      let formList = this.form.formList.filter(item => item.values.length > 0)  //获取标签列表
      if (columnIndex < formList.length - 1) {
        let rowSpan = 1
        for (let i = columnIndex + 1; i < formList.length; i++) {
          rowSpan *= formList[i].values.length
        }
        if (rowIndex % rowSpan == 0) {
          return { rowspan: rowSpan, colspan: 1 }
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
    }
  }
}
</script>

<style>
</style>